<template>
    <h2 align="center">新增门店</h2>
    <table border="1" align="center">
        <tr>
            <td>门店名称</td>
            <td>
                <input type="text"  v-model="state.storeName">
            </td>
        </tr>
        <tr>
            <td>门店图片</td>
            <td>
                <input type="file" @change="photochange" >
                <img v-if="src!=''" :src="'https://localhost:7125'+src" alt="" width="100" height="100">
            </td>
        </tr>
        <tr>
            <td>门店电话</td>
            <td>
                <input type="text" v-model="state.storePhone" maxlength="11" >
            </td>
        </tr>
        <tr>
            <td>门店地址</td>
            <td>
                <input type="text" v-model="state.storeAddress" >
            </td>
        </tr>
        <tr>
            <td>是否启用</td>
            <td>
                <input type="radio" name="use" v-model="state.storeState" value="1">是
                <input type="radio" name="use" v-model="state.storeState" value="0">否
            </td>
        </tr>
        <tr>
            <td>备注信息</td>
            <td>
                <textarea v-model="state.storeInter"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="增加门店" @click="add">
            </td>
        </tr>
    </table>
</template>
<script setup lang="ts">
import {reactive,toRefs} from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';
const router = useRouter()

const data = reactive({
    src:'',
    state:{
 "storeName": "",
  "storePhone": "",
  "storeState":1,
  "storeAddress": "",
  "storeImg": "",
  "storeInter": ""
    }
})
const {state,src} = toRefs(data);

//图片上传
const photochange = (e:any)=>{
    //1.拼数据
    console.log(e);
    var Formdata = new FormData();
    Formdata.append('file',e.target.files[0]);
    //2.发送请求
    axios({
        url:'/api/Upload',
        method:'post',
        data:Formdata
    })
    .then(res=>{
        console.log(res);
        if(res.data.code==1002)
        {
            alert("上传的不是图片");
            return;
        }
        else if(res.data.code==1001)
        {
            alert("上传图片不能超过2M");
            return;
        }
        else{
            alert("上传成功");
            src.value= res.data.data;
            state.value.storeImg=res.data.data;
        }
    })
    .catch(err=>{
        console.log(err);
    })
}


const add = ()=>{
    if(state.value.storeName=='')
    {
        alert('门店名称不能为空');
        return;
    }
    if(state.value.storePhone=='')
    {
        alert('门店电话不能为空');
        return;
    }
    if(state.value.storeAddress=='')
    {
        alert('门店地址不能为空');
        return;
    }
    if(state.value.storeImg=='')
    {
        alert('门店图片不能为空');
        return;
    }
    if(state.value.storeInter=='')
    {
        alert('备注不能为空');
        return;
    }
    var reg=/^1[3-9]\d{9}$/
    if(!reg.test(state.value.storePhone))
    {
        alert('电话格式不正确');
        return;
    }
    axios({
        url:'/api/Store/AddMendian',
        method:'post',
        data:state.value
    })
    .then(res=>{
        console.log(res);
        if(res.data.data>0)
        {
            alert('增加成功！');
            router.push('/ShowStore')
        }
        else{
            alert('增加失败！');
            return;
        }
        
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>